<template>
    <ul class="list">
        <li class="item" 
        v-for="(cityarea,key) in citiesList" 
        :key="cityarea.id" 
        :ref="key" 
        @click="handleLetterClick" 
        @touchstart="handleTouchStart" 
        @touchmove="handleTouchMove" 
        @touchend="handleTouchEnd">{{key}}
        </li>
    </ul>   
</template>
<script>
export default {
    name:'CityAlphabet',
    props:{
        citiesList:Object
    },
    computed:{
        letters () {
            let letters = []
            for (let i in this.citiesList){
                letters.push(i)
            }
            return letters
        }
    },
    data () {
        return {
            touchStatus: false,
        }
    },
    methods:{
        handleLetterClick (e) {
            this.$emit('change',e.target.innerText)
        },
        handleTouchStart () {
            this.touchStatus = true
        },
        handleTouchMove (e) {
            if (this.touchStatus){ 
                if(!this.timer) {
                    this.timer = setTimeout(() => {
                       const touchY = e.touches[0].clientY - 200
                        const index = Math.floor(touchY / 22.5)                     
                        this.$emit('change',this.letters[index]) 
                        this.timer = null
                        clearTimeout(this.timer)
                        if (index >= 0 && index <= this.letters.length){
                            this.$emit('change',this.letters[index])
                        }
                    },10)
                }                                                     
            }                                   
        },
        handleTouchEnd () {
            this.touchStatus = false
        }
    }
}
</script>
<style lang="stylus" scoped>
.list
    display: flex
    flex-direction: column
    justify-content: center
    position: absolute
    top: 1.58rem
    right: 0
    bottom: 0
    width: .4rem
    .item 
        line-height:.4rem
        text-align: center
        color:#00bcd4
</style>
